<template>
  <view @longpress="longPress">
    <uni-search-bar
        placeholder="店铺名称查询"
        cancel-button="none"
        @input="getByShopName"
    ></uni-search-bar>
    <uni-list :border="false">
      <uni-list-item
          :show-switch="showSwitch"
          :border="false"
          style="background-color: #f5f6f7"
          v-for="storeShop in shopList" :key="storeShop.shopsId"
          :title="storeShop.shopName"
          :note="shopStatus[storeShop.shopStatus]"
          :thumb="storeShop.shopLogo"
          thumb-size="lg"
          :right-text="storeShop.createTime.split(' ')[0]+'\n'+storeShop.createTime.split(' ')[1]"
          :show-arrow="false"
          direction="row"
          clickable
          @click="onclickItem(storeShop)"
          @switchChange="delShop(storeShop.shopsId)"
      ></uni-list-item>
    </uni-list>
    <uni-row>
      <uni-col :span="12" :push="6">
        <uni-pagination
            style="margin-top: 20px"
            v-model="queryParams.pageNum"
            :current="queryParams.pageNum"
            :total="total"
            :page-size="8"
            @change="change"
        ></uni-pagination>
      </uni-col>
    </uni-row>
  </view>
</template>

<script>
import {listShop} from "../../../../../api/shop/shop"
import UniList from "../../../../../uni_modules/uni-list/components/uni-list/uni-list";
import UniPagination from "../../../../../uni_modules/uni-pagination/components/uni-pagination/uni-pagination";
import UniSearchBar from "../../../../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar";
import UniListItem from "../../../../../uni_modules/uni-list/components/uni-list-item/uni-list-item";
import UniCol from "../../../../../uni_modules/uni-row/components/uni-col/uni-col";
import UniRow from "../../../../../uni_modules/uni-row/components/uni-row/uni-row";
import {delShop} from "../../../../../api/shop/shop";

export default {
  components: {UniRow, UniCol, UniListItem, UniSearchBar, UniPagination, UniList},
  data() {
    return {
      //店铺状态字典
      shopStatus: ["", "运营中", "审核中", "已关闭", "审核不通过"],
      //分页器数据
      total: 0,
      //店铺列表表格数据
      showSwitch: false,
      shopList: [],
      //分页请求参数
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        shopName: "",
        //按创建时间倒序查询
        orderByColumn: "create_time",
        isAsc: "desc",
      }
    }
  },
  created() {
    this.getStoreShop();
  },
  methods: {
    /**选中删除数据*/
    delShop(shopId) {
      //预存this, success属性的方法中不能用this
      let that = this;
      uni.showModal({
        url: "删除确认",
        content: "确认删除这个店铺的数据吗?",
        success: function (res) {
          if (res.confirm) {
            delShop(shopId).then(() => {
              that.getStoreShop();
            });
          } else if (res.cancel) {
            that.showSwitch = false;
          }
        },
      });
    },
    /**长按列表调出选择界面*/
    longPress() {
      this.showSwitch = !this.showSwitch;
    },
    /**跳转店铺详情页*/
    onclickItem(storeShop) {
      if (!this.showSwitch) {
        uni.navigateTo({
          url: `shop/showShop?storeShop=${JSON.stringify(storeShop)}`,
        });
      }
    },
    /**查询店铺列表 倒序查询*/
    getStoreShop() {
      listShop(this.queryParams).then(response => {
        this.shopList = response.rows;
        this.total = response.total;
        this.queryParams.pageNum = this.queryParams.pageNum > Math.ceil(this.total / this.queryParams.pageSize) ? this.queryParams.pageNum - 1 : this.queryParams.pageNum;
      })
    },
    /**翻页查询*/
    change(e) {
      this.queryParams.pageNum = e.current;
      this.getStoreShop();
    },
    /**店铺名称查询*/
    getByShopName(e) {
      this.queryParams.pageNum = 1;
      this.queryParams.shopName = e;
      this.getStoreShop();
    },
  }
}
</script>

<style>

</style>
